<template>
  <layout>
    <template #header>
      <view class="header flex flex-a-c">
        <text class="title bold">数据统览</text>
        <view @click="onShowFilter" class="filter flex flex-a-c">
          <text class="c-60 fs-24">筛选</text>
          <image
            src="../../assets/images/icons/filter.png"
            style="width: 48rpx; height: 48rpx; margin-left: 16rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
      <u-tabs
        class="tabs"
        :lineWidth="30"
        :lineHeight="4"
        :list="list2"
        :current="tabsCurrent"
        :activeStyle="{
          color: '#436AF3',
          fontWeight: 'bold',
          fontSize: '32rpx',
        }"
        :inactiveStyle="{
          color: '#070B1C',
          fontSize: '32rpx',
        }"
        :lineColor="'#436AF3'"
        @change="onChange"
      ></u-tabs>
    </template>
    <view class="list">
      <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll">
        <view class="list-box" v-if="list">
          <!-- 订单收益 -->
          <view class="item">
            <view class="top flex flex-bt">
              <view class="flex flex-a">
                <u-icon name="order" size="24" color="#F65900"></u-icon>
                <text class="type fs-28">订单收益</text>
              </view>
              <text class="income bold">￥{{ list.rechargeIncome }}</text>
            </view>
            <view class="bottom flex">
              <view>
                总充值<text class="m">￥{{ list.orderMoney }}</text>
              </view>
              <view style="margin-left: 20rpx">
                总退款<text class="m">￥{{ list.refundMoney }}</text>
              </view>
            </view>
          </view>
          <!-- 广告收益 -->
          <view class="item" v-if="false">
            <view class="top flex flex-bt">
              <view class="flex flex-a">
                <u-icon name="volume" size="24" color="#FFBC42"></u-icon>
                <text class="type fs-28">广告收益</text>
              </view>
              <text class="income bold">￥{{ list.rechargeIncome }}</text>
            </view>
            <view class="bottom">
              总退款<text class="m">￥{{ list.refundMoney }}</text>
            </view>
          </view>
        </view>
        <Empty :pic="require('../../assets/images/empty/normal-1.png')" v-else>
          <template v-if="!userInfo.userId" #extra>
            <view
              style="height: 80rpx; width: 224rpx; margin-top: 40rpx"
              class="active-btn"
              @click="toLogin"
            >
              去登录
            </view>
          </template>
        </Empty>
      </scroll-view>
    </view>
    <u-popup
      style="z-index: 999"
      :key="filterKey + 'key'"
      round
      :show="showFilter"
      @close="closeFilter"
      @open="open"
    >
      <view class="filter-content">
        <view class="title">
          <text class="fs-36 bold black">全部筛选</text>
          <u-icon class="close" name="close" @click="close"></u-icon>
        </view>
        <view class="f-item" v-for="(filter, index) in filters" :key="index">
          <text class="f-title fs-32 dark-text bold">{{ filter.title }}</text>
          <view class="flex flex-a">
            <text
              v-for="(type, i) in filter.types"
              :key="i"
              class="f-type"
              :class="[type.id == filtersSelected[index] ? 'active' : '']"
              @click="onFilterType(index, type)"
            >
              {{ type.name }}
            </text>
          </view>
        </view>
        <view class="f-item">
          <text class="f-title fs-32 dark-text bold">短剧名称</text>
          <view @click="showPicker = true" class="w-input flex flex-bt">
            <text class="name c-60">{{ vname }}</text>
            <image
              v-if="vname == '请选择短剧'"
              src="../../assets/images/icons/arrow-down.png"
            />
            <image
              @click.stop="clearDrama"
              v-else
              src="../../assets/images/icons/close-circle.png"
            />
          </view>
        </view>
        <view class="btns flex">
          <text @click="onReset" class="btn default-btn">重置</text>
          <text @click="onConfirm" class="btn active-btn">确定</text>
        </view>
      </view>
    </u-popup>
    <u-picker
      style="z-index: 9999"
      title="选择短剧"
      :show="showPicker"
      @close="onClose"
      @cancel="onClose"
      :key="dramaKey"
      :defaultIndex="dramaIndex"
      @confirm="onSelectDrama"
      closeOnClickOverlay
      :columns="columns"
      keyName="name"
    ></u-picker>
  </layout>
</template>

<script>
import layout from "../../compennts/layout/index.vue";
import Empty from "../../compennts/empty/index.vue";
import { getLocalUserInfo } from "../../assets/utils";
import { getStatistics, getDramaList } from "../../api/income";
import {
  getDayBegin,
  getDayEnd,
  formatDate,
  getMonthStartDay,
  getMonthEndDay,
} from "../../assets/utils/date";

export default {
  components: {
    layout,
    Empty,
  },
  data() {
    return {
      userInfo: {},
      columns: [],
      list2: [
        {
          name: "今天",
          day: 0,
        },
        {
          name: "昨天",
          day: 1,
        },
        {
          name: "近7天",
          day: 7,
        },
        {
          name: "近30天",
          day: 30,
        },
        {
          name: "本月",
          day: -1,
        },
        {
          name: "上月",
          day: -2,
        },
      ],
      tabsCurrent: 0,
      list: null,
      showFilter: false,
      originSelected: [null],
      filtersSelected: [null],
      dramaIndex: [0],
      originIndex: [0],
      dramaKey: 0,
      filterKey: 0,
      filters: [
        {
          title: "投稿渠道",
          types: [
            {
              name: "全部",
              id: null,
            },
            {
              name: "抖音",
              id: 0,
            },
            {
              name: "快手",
              id: 1,
            },
            {
              name: "微信",
              id: 2,
            },
          ],
        },
      ],
      index: 0,
      vname: "请选择短剧",
      query: {
        vid: null,
        channelType: null,
        startTime: "",
        endTime: "",
      },
      showPicker: false,
      isLoading: false,
    };
  },
  watch: {
    isLoading(val) {
      val ? uni.showLoading() : uni.hideLoading();
    },
  },
  onShow() {
    this.userInfo = getLocalUserInfo();
    this.query.startTime = formatDate(getDayBegin());
    this.query.endTime = formatDate(getDayEnd());
    this.onGetDramaList();
    let day = this.list2[this.tabsCurrent].day || 0;
    const { begin, end } = this.getDate(day);
    this.query.startTime = begin;
    this.query.endTime = end;
    this.getList();
  },
  mounted() {},
  computed: {},
  methods: {
    onGetDramaList() {
      if (!this.userInfo?.userId) {
        return;
      }
      getDramaList().then((res) => {
        this.columns = [];
        let ls = res.data.map((item) => {
          item.id = item.vid;
          item.name = item.vname;
          return item;
        });
        this.columns.push(ls);
      });
    },
    getList() {
      if (!this.userInfo?.userId) {
        return;
      }
      this.isLoading = true;
      getStatistics(this.query).then((res) => {
        this.list = res.data || null;
        this.isLoading = false;
      });
    },
    getDate(diff) {
      if (diff >= 0) {
        if (diff == 1) {
          return {
            begin: formatDate(getDayBegin(diff)),
            end: formatDate(getDayEnd(diff)),
          };
        } else {
          return {
            begin: formatDate(getDayBegin(diff)),
            end: formatDate(getDayEnd()),
          };
        }
      }
      if (diff == -1) {
        return {
          begin: formatDate(getMonthStartDay(0)),
          end: formatDate(getDayEnd()),
        };
      }
      if (diff == -2) {
        return {
          begin: formatDate(getMonthStartDay(1)),
          end: formatDate(getMonthEndDay(1)),
        };
      }
    },

    onChange(e) {
      const { day } = e;
      console.log(day, e);
      this.tabsCurrent = e.index;
      const { begin, end } = this.getDate(day);
      this.query.startTime = begin;
      this.query.endTime = end;
      uni.setStorageSync("data_day", day);
      this.getList();
    },
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    close() {
      this.showFilter = false;
      this.filtersSelected = JSON.parse(JSON.stringify(this.originSelected));
      this.dramaIndex = JSON.parse(JSON.stringify(this.originIndex));
      setTimeout(() => {
        uni.showTabBar();
      }, 400);
    },
    clearDrama() {
      this.dramaIndex = [0];
      this.query.vid = null;
      this.vname = "请选择短剧";
    },
    confirmDrama() {
      this.filtersSelected = JSON.parse(JSON.stringify(this.dramaIndex));
      this.getList();
      this.close();
    },
    open() {},
    onShowFilter() {
      this.filterKey++;
      uni.hideTabBar();
      this.showFilter = true;
    },
    onFilterType(idx, item) {
      this.$set(this.filtersSelected, idx, item.id);
    },
    onReset() {
      this.filtersSelected = [null];
      this.dramaIndex = [0];
      this.vname = "请选择短剧";
      this.query.vid = null;
      this.dramaKey++;
    },
    onConfirm() {
      this.originSelected = JSON.parse(JSON.stringify(this.filtersSelected));
      this.originIndex = JSON.parse(JSON.stringify(this.dramaIndex));
      this.close();
      this.query.channelType = this.filtersSelected[0];
      this.getList();
    },
    closeFilter() {},
    onClose() {
      this.dramaIndex = this.originIndex;
      this.showPicker = false;
    },
    onSelectDrama(e) {
      this.dramaIndex = e.indexs;
      this.query.vid = e.value[0].id;
      this.vname = e.value[0]?.name || "请选择短剧";
      this.showPicker = false;
    },
    onScroll() {
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.header {
  position: relative;
  padding: 0 26rpx;
  .title {
    font-size: 36rpx;
    color: #070b1c;
  }
  .filter {
    position: absolute;
    right: 26rpx;
  }
}
.tabs {
  padding: 0 26rpx;
  margin-left: -26rpx;
  margin-bottom: 24rpx;
}
.list {
  padding: 0 26rpx;
  flex: 1;
  height: 100%;
  .scroll-box {
    height: 100%;
  }
  .list-box {
    padding-bottom: 1rpx;
  }
}
.item {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
  padding: 36rpx 32rpx;
  .type {
    color: rgba(7, 11, 28, 0.6);
    margin-left: 12rpx;
  }
  .income {
    color: #070b1c;
    font-size: 28rpx;
  }
  .bottom {
    color: rgba(7, 11, 28, 0.4);
    font-size: 24rpx;
    margin-top: 8rpx;
    .m {
      color: rgba(7, 11, 28, 0.8);
      margin-left: 8rpx;
    }
  }
}
.filter-content {
  padding: 48rpx 0;
  box-sizing: border-box;
  .title {
    padding: 0 48rpx;
    text-align: center;
    position: relative;
    line-height: 36rpx;
    .close {
      position: absolute;
      right: 48rpx;
      top: 0;
      font-size: 48rpx;
    }
  }
  .f-item {
    padding: 0 48rpx;
    margin-top: 48rpx;
    .f-title {
      color: rgba(7, 11, 28, 0.8);
    }
    .f-type {
      flex: 1;
      margin-right: 16rpx;
      padding: 8rpx;
      border-radius: 8rpx;
      border: 2rpx solid #f5f7fe;
      background: #f5f7fe;
      text-align: center;
      color: rgba(7, 11, 28, 0.6);
      margin-top: 24rpx;
      &:nth-last-child(1) {
        margin-right: 0;
      }
      &.active {
        color: #436af3;
        border-color: #436af3;
      }
    }
    .w-input {
      width: 100%;
      height: 72rpx;
      background: #f5f7fe;
      border-radius: 8rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      padding: 0 32rpx;
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .btns {
    padding: 24rpx 48rpx 0 48rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      &:nth-child(1) {
        margin-right: 22rpx;
      }
    }
  }
}

/deep/ .u-popup {
  .u-transition {
    z-index: 10000 !important;
  }
}
</style>
